<script setup>
import { onMounted, ref } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import {
  getTwoHighsAlong
} from '../api.js'

const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})

const firstBatchChartBarRef = ref(null)
const secondBatchChartBarRef = ref(null)

const getBarChartOption = (data) => {
  return {
    grid: {
      top: '20%',
      left: '12%',
      bottom: '13%',
      right: '16%',
    },
    legend: {
      show: true,
      right: 'center',
      itemWidth: 6,
      itemHeight: 6,
      // width: '100%',
      textStyle: {
        color: '#b4d3ed',
        fontSize: 12,
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      data: data.xAxis,
      axisLabel: {
        showMaxLabel: true,
        textStyle: {
          color: '#ffffff',
          fontSize: 9,
        },
        rotate: -60,
        padding: [3, 0, 0, 0],
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgb(64,77,93)',
          width: 1,
        },
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: 'rgb(64,77,93)',
        },
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        name: '任务数',
        type: 'value',
        position: 'left',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: true,
        },
      },
      {
        name: '自然村数',
        type: 'value',
        position: 'right',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
          // margin: 20, // 增加标签与轴的距离
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: false,
        },
        offset: 10, // 向右偏移确保数字显示完整
      },
    ],
    series: [
      {
        name: '任务数',
        type: 'bar',
        barWidth: 10,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'outside', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        yAxisIndex: 0,
        itemStyle: {
          // color: '#24d4b8',
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#3df389' // 0% 处的颜色
            }, {
                offset: 1, color: '#0cb6e7' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        data: data['任务数'],
      },
      {
        name: '自然村数',
        type: 'line',
        smooth: true,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'top', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        itemStyle: {
          color: '#ffff00',
        },
        yAxisIndex: 1,
        data: data['自然村数'],
      }
    ],
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c89' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c21' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
  }
}
const updateChartBar = (res) => {
  const data_1 = {
    xAxis: res.cityNames,
    "任务数": res['第一批任务']['taskValue'],
    "自然村数": res['第一批任务']['cunValue'],
  }
  const data_2 = {
    xAxis: res.cityNames,
    "任务数": res['第二批任务']['task2Value'],
    "自然村数": res['第二批任务']['cun2Value'],
  }
  firstBatchChartBarRef.value?.updateOption(getBarChartOption(data_1))
  secondBatchChartBarRef.value?.updateOption(getBarChartOption(data_2))
}

const reqData = () => {
  getTwoHighsAlong()
    .then((res) => {
      updateChartBar(res.data)
    })  
}

onMounted(() => {
  reqData()
})
</script>

<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card name="两高沿线" class="total-card">
      <div class="section">
        <div class="section-title">＞ 各区县两高沿线第一批任务</div>
        <div class="chart">
          <draw-echarts
            ref="firstBatchChartBarRef"
            width="420"
            height="300"
            :options="{}"
          ></draw-echarts>
        </div>
      </div>

      <div class="section">
        <div class="section-title">＞ 各区县两高沿线第二批任务</div>
        <div class="chart">
          <draw-echarts
            ref="secondBatchChartBarRef"
            width="420"
            height="300"
            :options="{}"
          ></draw-echarts>
        </div>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.left {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .total-card {
    height: 410px;
    margin-bottom: var(--card-margin-bottom);

    .section-title {
      line-height: 30px;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 10px;
    }
    .section:not(:first-child) .section-title {
      margin-top: 12px;
    }

    .overview-wrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 10px;

      .overview-box {
        position: relative;
        margin-bottom: 5px;
        padding-left: 16px;
        width: 46%;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 5px;
      
        text-align: left;
        color: #eee;

        background: linear-gradient(to right, #044e79 0%, #063254 50%, #081a3400 100%);
        border: solid 1px;
        border-image: linear-gradient(90deg, #00EDF4, #081731) 1;
        .overview-value {
          position: relative;
          font-size: 20px;
          font-weight: bold;
          color: #fff;
        }
      }
    }
  }

  .table-wrap {
    color: #ffffff;
    
    .tr {
      display: flex;
      height: 32px;
      line-height: 32px;
      .td {
        flex: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        word-break: break-all;
        padding: 0 4px;
      }
      .name {
        flex: 7;
      }
    }
    .th {
      color: #bbdbf6;
    }
    .tr:nth-child(odd) {
      background-color: #1c2d4c;
    }
    .tr:nth-child(even) {
      background-color: #08142d;
    }
  }
}
</style>
